<script lang="ts" setup>
import { computed } from 'vue'
import dayjs from 'dayjs'
import { StoreStatus } from '@/types/enum'
import { copyEvent } from '@/utils'
interface DataType {
  storeName: string
  status: StoreStatus
  cityName: string
  createdTime: string
  serviceTime: string
  contactPerson: string
  contactPhone: string
  [key: string]: any
}
defineProps<{
  data: DataType
  isDivider: boolean
}>()
const changeStatus = computed(() => {
  return (status: StoreStatus) => {
    switch (status) {
      case StoreStatus.OPEN:
        return '营业中'
      case StoreStatus.CLOSE:
        return '已歇业'
      case StoreStatus.DELETED:
        return '已删除'
      default:
        break
    }
  }
})
const emits = defineEmits(['card-click'])
</script>

<template>
  <el-card shadow="never" border-0>
    <div flex flex-col @click="emits('card-click', data)">
      <div class="store-info-card__content" flex flex-col px-0 pt-0>
        <div class="card__title" flex items-center mb-8>
          <span v-if="data.storeName">{{ data.storeName }}</span>
          <el-tag v-if="data.status == '1'" type="success">{{ changeStatus(data.status) }}</el-tag>
          <el-tag v-else-if="data.status == '0'" type="warning">{{
            changeStatus(data.status)
          }}</el-tag>
          <el-tag v-else-if="data.status == '2'" type="danger">{{
            changeStatus(data.status)
          }}</el-tag>
        </div>
        <div>
          加盟地区&nbsp;:<span>{{ data.cityName }}</span>
        </div>
        <div>
          加入时间&nbsp;:<span v-if="data.createdTime">{{
            dayjs(data.createdTime).format('YYYY-MM-DD HH:mm:ss')
          }}</span>
        </div>
        <div>
          营业时间&nbsp;:<span>{{ data.serviceTime }}</span>
        </div>
        <div>
          联系人&nbsp;:<span>{{ data.contactPerson }}</span>
        </div>
        <div>
          联系电话&nbsp;:<span>{{ data.contactPhone }}</span
          ><el-button
            v-if="data.contactPhone"
            link
            @click="copyEvent(data.contactPhone)"
            size="small"
            type="primary"
            >复制</el-button
          >
        </div>
        <el-divider v-if="isDivider" />
      </div>
      <div>
        <slot name="button" />
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss"></style>
